<!--
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2023-11-29 09:50:03
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2025-02-27 14:11:49
 * @FilePath: \partal\src\views\develop\components\QuickStartPc.vue
 * @Description: 快速上手-PC端
-->

<script lang="ts" setup>
  import errorPng from '@/assets/img/develop/quickStart/h5-error.png'
</script>

<template>
  <div class="pc">
    <p class="p14">SSC+ Design Web</p>
    <p class="p36 mt18">快速上手</p>
    <p class="p14 mt12">通过本文你可以掌握 SSC+ Design Web 的安装和使用方法，操作简单易上手，开发简洁快速。</p>

    <p class="split mt38" />

    <p class="p24 mt46">准备</p>
    <p class="p14 mt18">1. node.js 版本 v12 以上</p>
    <p class="p14 mt18">2. npm 源切换至 云海链私服</p>
    <pre class="code mt18">
<p class="gray"># 项目根目录下创建 .npmrc 文件，并将以下内容拷贝至文件中</p>registry="https://nexus.ssc-hn.com/repository/npm-group/"
    </pre>
    <p class="p14 mt18">3. vue 技术栈</p>
    <p class="p14 mt4">vue 版本：3.2 以上</p>
    <p class="p14 mt4">打包工具：vite</p>
    <p class="p14 mt4">语言类型：typescript</p>
    <p class="p14 mt4">css预处理器：less</p>
    <p class="p14 mt18">4. 安装 ant-design-vue 组件库</p>
    <p class="p14 mt4">SSC+ Design Web 是基于 ant-design-vue 组件库构建的，需要开发者进行预安装</p>
    <pre class="code mt18">
<p>pnpm i ant-design-vue --S</p>
</pre>

    <p class="split mt38" />

    <p class="p24 mt46">安装</p>
    <pre class="code mt18">
<p class="gray"># common模块必须安装</p>pnpm i @sscd/common -S

<p class="gray"># 其余组件按需安装</p>pnpm i @sscd/button -S
    </pre>

    <p class="split mt38" />

    <p class="p24 mt46">使用</p>
    <p class="p18 mt18">样式全局引入</p>
    <pre class="code mt18">
<p class="gray"># main.ts中直接引入</p>import '@sscd/common/style.less'
    </pre>
    <p class="p18 mt18">组件使用（按需引入）</p>
    <pre class="code mt18">
&lt;template&gt;
  &lt;Button&gt;&lt;/Button&gt;
&lt;/template&gt;

&lt;script lang="ts" setup&gt;
  import Button from '@sscd/button'
&lt;/script&gt;

&lt;style lang="less" scoped>&lt;/style&gt;
    </pre>
    <p class="p18 mt18">函数式组件使用</p>
    <p class="p14 mt18">SSC+ Design Web 中 Message等组件没有提供 标签式 使用，只允许 函数式 使用。</p>
    <pre class="code mt18">
&lt;template&gt;&lt;/template&gt;

&lt;script lang="ts" setup&gt;
  import Message from '@sscd/message'
  Message.info('SSC+ Design Web');
&lt;/script&gt;

&lt;style lang="less" scoped>&lt;/style&gt;
    </pre>

    <p class="split mt38" />

    <p class="p24 mt46">Viewport 自适应布局</p>
    <p class="p14 mt18">
      SSC+ Design Web 默认使用 px 作为样式单位，设计稿尺寸为 1440px，如果需要使用 vw 或者 rem 单位，推荐使用 postcss-px-to-viewport 插件进行转换。
      <br />
      示例配置方式：
    </p>
    <pre class="code mt18">
<p class="gray"># vite.config.js</p>import PxToViewport from 'postcss-px-to-viewport'
export default defineConfig({
  css: {
    postcss: {
      plugins: [
        PxToViewport({
          viewportWidth: 1440
        })
      ]
    }
  }
})
    </pre>

    <p class="split mt38" />

    <p class="p24 mt46">错误案例</p>
    <p class="p14 mt18">安装 @sscd 组件时，npm-group 不知何时被写入受保护的token，可能是执行 npm login 导致</p>
    <img class="error-img mt12" :src="errorPng">
    <p class="p14 mt18">解决办法：在命令终端执行 npm config edit，系统会自动打开 .npmrc 文件，删除 //nexus.ssc-hn.com/repository/npm-group/:_authToken=... 这一行并保存</p>
  </div>
</template>

<style type="less" scoped>
  .pc {
    width: 988px;
    margin: auto;
    padding-bottom: 108px;

    .error-img {
      width: 100%;
      height: auto;
    }
  }
</style>
